我們這個系列將會使用 PixiJS v8 來進行介紹，不過在正式開始寫 PixiJS 之前，我得先來介紹這次的秘密武器：Code.Gamelet（簡稱 CG），也就是我當初開始寫程式的地方！

CG 是在 2018 年，由 小哈片刻 正式推出，使用 TypeScript 作為基礎語言的遊戲創作平台，只要有一個 Google 帳號，一台可以上網的電腦，你就可以隨時隨地打開 CG 揮灑你的創意！

• 省略前置作業：在 CG 上，你不用自己安裝軟體、設定環境，也不用煩惱程式打包，只要登入並建立專案，載入 Pixi 模組，就可以馬上開始創作。這對一個剛入門的新手來說，真的省了超多麻煩！
• 快速發布遊戲：當你完成遊戲後，CG 提供了打包功能，可以直接獲得一個專屬的遊戲網址，分享出去，大家就能馬上玩到你的遊戲。除此之外，CG 還支援打包成 .exe、apk，甚至是直接匯出 Steam 上的版本，超方便。

當然，CG 還有很多強大的功能，像是提供玩家登入的資料庫、多人連線伺服器，以及其他開發者分享的自製模組等。不過，由於這次的重點是 PixiJS，所以暫時不會介紹到這些東西。

▸ 在 CG 上建立新的專案

進入 CG 後，點擊右上角的「新創專案」就能建立新專案。此時會需要登入帳號，你可以根據自己的習慣選擇 Google 或 GitHub 帳號。

登入後，會彈出新增專案的視窗。這裡會預設勾選一些模組，由於我們想從頭開始，所以 全部取消勾選 後，直接按下方的「新增一個空白專案」按鈕。

接下來，你需要為專案取一個獨一無二的代碼。這個代碼只能是英文、數字、底線，只要不跟別人的重複就好，像我這次就取名為 ironman2025_cook。輸入完成後，點擊「新創專案」。

專案創建完成後，CG 會自動跳轉到專案內的 README.md 說明文件。看到這個畫面，就代表我們的專案建立成功啦！

▸ 載入 Pixi 模組

點擊專案右側欄上，如圖示的按鈕，即可打開 載入模組 頁面。這裡會顯示你專案內所有已安裝的模組，由於我們還沒安裝任何東西，所以是空白的。現在讓我們點擊上方的「加載模組」。

打開後，在左方的 搜尋關鍵字 內輸入 Pixi 來尋找模組。找到由 Haskasu 上傳的 Pixi 後，點擊模組標題可以展開說明，確認無誤後點擊「加載模組」即可。

如上圖，安裝完成後，即可在右側的模組頁面看到 Pixi、Base2 這兩個模組，這樣就說明我們安裝成功囉～

▸ 撰寫第一個 Pixi 測試程式

現在，讓我們來寫點程式碼測試一下。首先，點擊左側 檔案總管 內的 app.ts 檔案。這裡是專案的進入點，當你執行專案時，第一個會被執行的就是這個檔案。

將 app.ts 內的預設程式碼全部清空，接著將下方的程式碼直接複製貼上。這段程式碼會初始化遊戲舞台，並在畫面中央顯示一行字。

import pixi = CG.Pixi.pixi;

async function start() {

    // 初始化 Pixi
	await pixi.initialize({
		stageWidth: 960,
		stageHeight: 540
	});
    
    // 建立文字物件
	const text = new PIXI.Text({
		text: "Hello CG!",
		style: {
			fill: 0xFFFFFF,
			fontSize: 200
		},
		anchor: 0.5,
		position: {
			x: pixi.stageWidth * 0.5,
			y: pixi.stageHeight * 0.5
		}
	} as PIXI.TextOptions);
    
    // 將文字物件加入舞台
	pixi.root.addChild(text);
}

start();

完成後，點擊專案上方的「試玩遊戲」。

沒有意外的話，畫面上應該會出現白色的「Hello CG!」字樣，這就是我們剛才貼上的程式碼所達成的效果！

▸ 總結

今天，我們手把手帶大家建立了 CG 專案、安裝了 Pixi 模組，並成功寫出了第一個 PixiJS 測試程式。雖然還沒有深入介紹程式碼的細節，但從明天開始，我們就會正式進入最令人期待的寫程式環節啦！